<template>
  <div id="OrderStatistics">
    <div id="OrderLeft">
      <p>交易概况</p>
      <div id="tradingVessels">
<!--        已发货的-->
        <div class="tradingThree">
          <div class="numerical delivery" :style="{width:delivery.width}">{{delivery.deliveryNum}}单</div>
          <div class="ongoing">进行中</div>
        </div>
<!--        已退款的-->
        <div class="tradingThree">
          <div class="numerical refund" :style="{width:refund.width}">{{refund.refundNum}}单</div>
          <div class="ongoing">进行中</div>
        </div>
<!--        未发货的-->
        <div class="tradingThree">
          <div class="numerical noDelivery" :style="{width:noDelivery.width}">{{noDelivery.noDeliveryNum}}单</div>
          <div class="ongoing">进行中</div>
        </div>
        <div class="tradingAll">
          <span class="delivery leftFL"></span>
          <span class="tradingTitle leftFL">已发货</span>
          <span class="refund leftFL"></span>
          <span class="tradingTitle leftFL">已退款</span>
          <span class="noDelivery leftFL"></span>
          <span class="tradingTitle leftFL">未发货</span>
        </div>
      </div>
<!--      成交率-->
      <p>成交率</p>
      <div id="closing"></div>
    </div>
    <div id="OrderRight">
      <p>热搜关键词</p>
      <div class="heatChineseVessels">
        <div class="heatsearch" v-for="(list,index) in hotSearch" :key="index">
          {{list}}
        </div>
      </div>
      <p>地区分布</p>
      <div class="area">
        <China/>
      </div>
    </div>
  </div>
</template>

<script>
import China from './China/China'
export default {
  name: 'OrderStatistics',
  data () {
    return {
      // 不同单数的信息，width和数量
      delivery: {
        deliveryNum: 10,
        width: '8%'
      },
      refund: {
        refundNum: 100,
        width: '8%'
      },
      noDelivery: {
        noDeliveryNum: 50,
        width: '8%'
      },
      click: [
        40, 45, 50, 55, 60, 65, 70, 75, 75, 80, 85, 85
      ],
      purchased: [
        10, 15, 20, 25, 30, 35, 40, 45, 45, 50, 55, 55
      ],
      hotSearch: []
    }
  },
  components: {
    China
  },
  mounted () {
    // 热搜关键词
    this.searchHot()
    // 周成交率
    this.getWeekSuccess().then(week => {
      // 月成交率
      this.getMonthSuccess().then(month => {
        // 年成交率
        this.getYearSuccess().then(year => {
          this.thisMsg(week, month, year)
        }).catch(err => {
          console.log(err.toString())
        })
      }).catch(err => {
        console.log(err.toString())
      })
    }).catch(err => {
      console.log(err.toString())
    })
    this.payMsg().then(data => {
      // 通过单数计算width占总width的百分比
      if (data) {
        const ansNum = this.delivery.deliveryNum + this.refund.refundNum + this.noDelivery.noDeliveryNum
        this.delivery.width = 8 + (this.delivery.deliveryNum / ansNum) * 92 + '%'
        this.refund.width = 8 + (this.refund.refundNum / ansNum) * 92 + '%'
        this.noDelivery.width = 8 + (this.noDelivery.noDeliveryNum / ansNum) * 92 + '%'
      }
    })
    this.ratio()
  },
  methods: {
    // 热搜关键词
    searchHot () {
      this.$axios({
        url: '/Menu/Admin/getHotSearch'
      }).then(data => {
        this.hotSearch = data.data.object
      }).catch(err => {
        console.log(err)
      })
    },
    // 获取周成交率
    getWeekSuccess () {
      return new Promise((resolve, reject) => {
        this.$axios({
          url: '/Menu/Admin/turnoverWeekRatio'
        }).then(data => {
          resolve(data.data.object)
        }).catch(err => {
          reject(err)
        })
      })
    },
    // 获取月成交率
    getMonthSuccess () {
      return new Promise((resolve, reject) => {
        this.$axios({
          url: '/Menu/Admin/turnoverMonthRatio'
        }).then(data => {
          resolve(data.data.object)
        }).catch(err => {
          reject(err)
        })
      })
    },
    // 获取年成交率
    getYearSuccess () {
      return new Promise((resolve, reject) => {
        this.$axios({
          url: '/Menu/Admin/turnoverYearRatio'
        }).then(data => {
          resolve(data.data.object)
        }).catch(err => {
          reject(err)
        })
      })
    },
    // 交易信息
    payMsg () {
      return new Promise((resolve, reject) => {
        this.$axios({
          url: '/Menu/Admin/deliverySituation'
        }).then(data => {
          const { object } = data.data
          this.delivery.deliveryNum = object.delivered
          this.refund.refundNum = object.refunded
          this.noDelivery.noDeliveryNum = object.unshipped
          resolve(true)
        }).catch(err => {
          console.log(err.toString())
          reject(err.toString())
        })
      })
    },
    ratio () {
      this.$axios({
        url: '/Menu/Admin/getHotSearch'
      }).then(data => {
        // console.log(data)
      }).catch(err => {
        console.log(err)
      })
    },
    thisMsg (week, month, year) {
      var myChart = this.$echarts.init(document.getElementById('closing'))
      myChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['周成交率', '月成交率', '年成交率']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['', '', '', '', '', '', '', '', '', '', '', '']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '周成交率',
            type: 'line',
            smooth: true,
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            data: week
          },
          {
            name: '月成交率',
            type: 'line',
            smooth: true,
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            data: month
          },
          {
            name: '年成交率',
            type: 'line',
            smooth: true,
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            data: year
          }
        ]
      })
    }
  }
}
</script>

<style lang="less" scoped>
  #OrderStatistics{
    width: 100%;
    padding: 15px;
    background-color: rgb(255, 244, 231);
    display: grid;
    grid-template-columns: auto 500px;
    grid-template-rows: 100%;
    min-width: 1150px;
    #OrderLeft{
      padding-right: 20px;
      p{
        font-weight: 600;
        margin: 10px 0;
      }
      #tradingVessels{
        width: 100%;
        height: 260px;
        background-color: #ffffff;
        border-radius: 5px;
        padding: 20px;
        .delivery{
          background-image:linear-gradient(90deg,rgb(49, 182, 247),rgba(49, 182, 247,.3)) ;
        }
        .refund{
          background-image: linear-gradient(90deg,rgb(253, 70, 234),rgba(253, 70, 234,.3));
        }
        .noDelivery{
          background-image: linear-gradient(90deg,rgb(250, 233, 78),rgba(250, 233, 78,.3));
        }
        .tradingThree{
          width: 100%;
          height: 40px;
          margin: 10px 0 !important;
          display: grid;
          grid-template-rows: 40px;
          grid-template-columns: auto 100px;
          .ongoing{
            line-height: 40px;
            text-align: left;
            color: rgb(255, 162, 47);
            font-weight: 600;
            font-size: 14px;
            padding-left: 20px;
          }
          .numerical{
            height: 100%;
            padding-left: 20px !important;
            line-height: 40px;
            color: #ffffff;
            border-radius: 0 20px 20px 0;
          }
        }
        .tradingAll{
          margin-top: 40px !important;
          width: 100%;
          height: 20px;
          span{
            display: block;
            height: 100%;
            width: 70px;
            line-height: 20px;
            border-radius: 0 20px 20px 0;
            font-size: 13px;
          }
          .tradingTitle{
            margin: 0 50px 0 20px;
            background-image: linear-gradient(rgba(0,0,0,.0),rgba(0,0,0,.0));
          }
          .leftFL{
            float: left;
          }
        }
      }
      #closing{
        width: 100%;
        height: 440px;
        background-color: #ffffff;
      }
    }
    #OrderRight{
      p{
        font-weight: 600;
        margin: 10px 0;
      }
      .heatChineseVessels{
        width: 500px;
        height: 200px;
        background-color: #ffffff;
        border-radius: 5px;
        padding: 10px;
        overflow-y: auto;
        .heatsearch{
          float: left;
          color: #ff9512;
          font-size: 20px;
          max-width: 100%;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
      .area{
        width: 500px;
        height: 500px;
        background-color: #ffffff;
        position: relative;
      }
    }
  }
</style>
